<%--
  Created by IntelliJ IDEA.
  User: wanglinjun
  Date: 2021/7/5
  Time: 15:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
%>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>注册</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="stylesheet" href="../AmazeUI-2.4.2/assets/css/amazeui.min.css"/>
    <link href="../css/dlstyle.css" rel="stylesheet" type="text/css">
    <script src="../AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
    <script src="../AmazeUI-2.4.2/assets/js/amazeui.min.js"></script>
</head>

<body>
<div class="login-boxtitle">
    <a href="/home"><img alt="" src="../images/logobig.png"/></a>
</div>
<div class="res-banner">
    <div class="res-main">
        <div class="login-banner-bg"><span></span><img src="../images/big.jpg"/></div>
        <div class="login-box">
            <div class="am-tabs" id="doc-my-tabs">
                <a href="/doLogin"
                   class="am-btn am-btn-primary am-btn-sm"
                   style="font-size: 0.5rem;width:80px;margin-bottom: 0px;">返回登录</a>
                <h3 class="title" style="font-size: 32px;margin-top: 0px;margin-bottom: 0px">注 册</h3>
                <div class="am-tabs-bd">
                    <div class="am-tab-panel am-active">
                        <form action="/register" method="post" style="margin-top: 0px">
                            <div class="user-name">
                                <label for="user"><i class="am-icon-user" style="margin-top: 13px"></i></label>
                                <input type="text" name="userName" id="user" placeholder="用户名" required
                                       value="${userLogin.userName}">
                            </div>

                            <div class="user-phone">
                                <label for="phone"><i class="am-icon-mobile-phone am-icon-md"
                                                      style="margin-top: 5px"></i></label>
                                <input type="tel" name="phone" id="phone" placeholder="请输入手机号" required
                                       pattern="^1[3|4|5|7|8][0-9]{9}$">
                            </div>


                            <div class="verification">
                                <label for="code"><i class="am-icon-code-fork" style="margin-top: 13px"></i></label>
                                <input type="tel" name="code" id="code" placeholder="请输入验证码" required pattern="^\d{6}$">

                                <a class="btn" href="javascript:void(0);" onclick="sendMessage();"
                                   id="sendMobileCode">
                                    <span id="dyMobileButton" style="font-size: 14px">获取</span>
                                </a>
                                <span class="num"></span>
                            </div>

                            <div class="user-pass">
                                <label for="password"><i class="am-icon-lock" style="margin-top: 13px"></i></label>
                                <input type="password" name="password" id="password" placeholder="设置密码" required>
                            </div>
                            <div class="user-pass">
                                <label for="passwordRepeat"><i class="am-icon-lock"
                                                               style="margin-top: 13px"></i></label>
                                <input type="password" name="password1" id="passwordRepeat" placeholder="确认密码" required>
                            </div>
                            <div class="am-cf">
                                <input type="submit" name="" value="注册" class="am-btn am-btn-primary am-btn-sm am-fl">
                                <p id="tip" style="color: red;margin: 5px">${registerMsg}</p>
                            </div>

                        </form>
                    </div>
                    <hr>
                </div>
                <script>
                    $(function () {
                        $('#doc-my-tabs').tabs();
                    })
                </script>
            </div>
        </div>

    </div>
</div>
</div>
<div class="footer ">
    <div class="footer-hd ">
        <p>
            <b>|</b>
            <a href="# ">商城首页</a>
            <b>|</b>
            <a href="# ">支付宝</a>
            <b>|</b>
            <a href="# ">物流</a>
        </p>
    </div>
    <div class="footer-bd ">
        <p>
            <a href="# ">合作伙伴</a>
            <a href="# ">联系我们</a>
            <a href="# ">网站地图</a>
        </p>
    </div>
</div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}js/jquery-3.4.1.min.js"></script>
<script>
    function sendMessage() {
        //发送验证码
        var phone = document.getElementById("phone");
        var number = phone.value;
        if (!checkTel(number)) {
            return;
        }
        countDown();
        $.ajax({
            url: "<%=path%>/sendMobileCode?phone=" + number,
            type: "post",
            data: {},
            success: function () {
                // $("#tip").text("验证码发送成功！");
                // alert("验证码发送成功！");
            }
        });

        $("#phone").addClass("value", number);

    }

    //倒计时实现
    function countDown() {
        $("#dyMobileButton").hide()
        $(".num").show()
        var second = 30
        $(".num").text((second) + "秒")
        var interval = setInterval(function () {
            second--
            $(".num").text((second) + "秒")
            if (second === -1) {
                $("#dyMobileButton").text("重发")
                clearInterval(interval)
                $(".num").hide()
                $("#dyMobileButton").show()
            }
        }, 1000)
    }

    //手机号校验
    function checkTel(number) {
        var pattern = /(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(^(([0\+]\d{2,3})?(0\d{2,3}))(\d{7,8})((\d{3,}))?$)|(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;
        if (number == "") {
            alert("请输入手机号");
            return false;
        } else if (!pattern.test(number)) {
            alert("请输入合法手机号");
            return false;
        }
        return true;
    }

    //比对两次输入密码
    $("#password").blur(function () {
        if ($("#password").val() == "" || $("#passwordRepeat").val() == "") {
            $("#tip").val("");
            return;
        }
        if ($("#password").val() != $("#passwordRepeat").val()) {
            $("#tip").text("两次密码输入不一致");
            $("#password").val("");
        } else
            $("#tip").text(" ");
    })
    $("#passwordRepeat").blur(function () {
        if ($("#password").val() == "" || $("#passwordRepeat").val() == "") {
            $("#tip").val("");
            return;
        }
        if ($("#password").val() != $("#passwordRepeat").val()) {
            $("#tip").text("两次密码输入不一致");
            $("#passwordRepeat").val("");
            return;
        } else
            $("#tip").text(" ");
    })
</script>
</html>